<template>
  <div class="main">
    <!--导航栏-->
    <div class="nav">
      <div
        class="back"
        @click="onClickLeft()"
      >
        <a class="leftCoin"></a>返回</div>
      <div class="center">拉粉统计</div>
    </div>
    <div class="oneBox">
      <p class="oneBoxTop">客户经理姓名</p>
      <div class="oneBoxBottom">
        <div class="oneBoxBottomOne oneBoxBottomBorder">
          <p class="number1">439</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
        <div class="oneBoxBottomOne">
          <p class="number2">439</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
      </div>
    </div>
    <div class="oneBox">
      <p class="oneBoxTop">客户经理姓名</p>
      <div class="oneBoxBottom">
        <div class="oneBoxBottomOne oneBoxBottomBorder">
          <p class="number1">439</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
        <div class="oneBoxBottomOne">
          <p class="number2">439</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
      </div>
    </div>
    <div class="oneBox">
      <p class="oneBoxTop">客户经理姓名</p>
      <div class="oneBoxBottom">
        <div class="oneBoxBottomOne oneBoxBottomBorder">
          <p class="number1">439</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
        <div class="oneBoxBottomOne">
          <p class="number2">439</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
      </div>
    </div>
    <div class="oneBox">
      <p class="oneBoxTop">客户经理姓名</p>
      <div class="oneBoxBottom">
        <div class="oneBoxBottomOne oneBoxBottomBorder">
          <p class="number1">0</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
        <div class="oneBoxBottomOne">
          <p class="number2">0</p>
          <p class="footerBoxLeftOneFont">拉粉人数</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { NavBar, Field, Button } from 'vant';
export default {
  methods: {
    onClickLeft() {
      window.history.length > 1 ? this.$router.go(-1) : this.$router.push('/');
    }
  },
  components: {
    'van-nav-bar': NavBar,
    'van-field': Field,
    'van-button': Button
  }
};
</script>

<style lang="scss" scoped>
.main {
  width: 10rem;
  margin: 0 auto;
}
.nav {
  width: 10rem;
  height: 1.17333rem;
  background-color: #ffffff;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
  font-size: 34px;
  .back {
    flex: 48%;
    margin-left: 22px;
    .leftCoin {
      color: #010101;
      width: 20px;
      height: 20px;
      border-top: 2px solid #010101;
      border-left: 2px solid #010101;
      transform: rotate(-45deg);
      display: inline-block;
    }
  }
  .center {
    flex: 70%;
  }
}
.van-nav-bar__left,
.van-nav-bar__right {
  bottom: inherit;
}
.head {
  width: 750px;
  height: 88px;
  justify-content: center;
  display: flex;
  align-items: center;
  background-color: #ffffff;
}
.van-nav-bar__title {
  @include sc(34px, #010101);
}
.van-nav-bar__text {
  @include sc(34px, #010101);
}
.van-nav-bar .van-icon {
  color: #010101;
}
.prompt {
  width: 100%;
  /*height: 1334px;*/
  /*border:1px solid #ccc;*/
  margin-top: 34px;
  margin-bottom: 16px;
  margin-left: 31px;
}
.promptFont {
  width: 335px;
  height: 27px;
  @include sc(28px, #7f7f7f);
}
.oneBox {
  width: 690px;
  background-color: #ffffff;
  box-shadow: 0 2px 9px 0 #dedbdb;
  border-radius: 8px;
  margin: 0 auto;
  margin-top: 26px;
  .oneBoxTop {
    font-size: 32px;
    margin-left: 21px;
    padding-top: 7px;
  }
  .oneBoxBottom {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 150px;
    justify-content: space-between;
    align-items: center;
    .oneBoxBottomOne {
      width: 50%;
      height: 70%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .number1 {
        @include sc(38px, #05a72f);
      }
      .footerBoxLeftOneFont {
        @include sc(28px, #989898);
      }
      .number2 {
        @include sc(38px, #ff0000);
      }
    }
    .oneBoxBottomBorder {
      border-right: 1px solid #ccc;
    }
  }
}
</style>
